// 导航栏主题
$navthemes: (
  DraculaOrchid: (
    bg-color: #2d3436,
    color: #eee
  ),
);
// 字体主题
$fontthemes: (
  '#d63031',
  "#2A82E4",
  '#FA541C',
  '#FAAD14',
  '#13C2C2',
  '#65d8d8',
  '#52C41A',
  '#1890FF',
  '#722ED1'
);
// 针对button 的混合
@mixin el_button($color) {
  color: #eee;
  background-color: #{$color};
  border-color: #{$color};
  &[disabled] {
    opacity: .5;
  }
}
// 导航
@mixin nav_themes($theme, $map) {
  body[data-navtheme="#{map-get($map, 'bg-color')}"] {
    .header-layout-container {
      background-color:map-get($map, 'bg-color') ;
      .el-badge, & .el-dropdown {
        color: map-get($map, 'color');
      }
      .el-menu-item {
        color: map-get($map, 'color');
        background-color: map-get($map, 'bg-color');
        &:hover {
          color: map-get($map, 'color');
          background-color: darken(map-get($map, 'bg-color'), 10%);
        }
        &.is-active {
          color: map-get($map, 'color');
          background-color:darken(map-get($map, 'bg-color'), 10%);
        }
      }
    }
    // 头部导航
    .site-navbar {
      background-color: map-get($map, 'bg-color');
      .el-badge, & .el-dropdown {
        color: map-get($map, 'color');
      }
      .site-navbar__scroll, & .site-navbar__scroll  marquee a {
        color: map-get($map, 'color' );
      }
      .el-menu-item {
        color: map-get($map, 'color');
        background-color: map-get($map, 'bg-color');
        &:hover {
          background-color: map-get($map, 'bg-color') - #222;
        }
        &.is-active {
          background-color: map-get($map, 'bg-color') - #222;
        }
      }
    }

    .layout-sider-bar-container {
      background-color: map-get($map, 'bg-color');
      .el-menu {
        background-color: map-get($map, 'bg-color');
      }
        .el-submenu {
          .el-submenu__title{
            background-color: map-get($map, 'bg-color');
            color: map-get($map, 'color');
          }
        }
        .el-menu-item {
          color: map-get($map, 'color');
          background-color: map-get($map, 'bg-color');
          &:hover {
            color: map-get($map, 'color');
            background-color: map-get($map, 'bg-color') - #151515;
          }
          &.is-active {
            color: map-get($map, 'color');
            background-color: map-get($map, 'bg-color') - #151515;
          }
        }
      }

    // 左导航
    .site-sidebar__inner {
      background-color: map-get($map, 'bg-color');
      .el-menu-item {
        color: map-get($map, 'color');
        background-color: map-get($map, 'bg-color');
        &:hover {
          background-color: map-get($map, 'bg-color') - #151515;
        }
        &.is-active {
          background-color: map-get($map, 'bg-color') - #151515;
        }
      }
    }
    // 报表
    .el-card__body .el-menu{
      .el-submenu, & .el-menu-item {
        background-color: map-get($map, 'bg-color');
      }
      .el-submenu__title {
        color: map-get($map, 'color');
        border: 1px solid white;
      }
      .el-submenu .el-menu-item {
        background-color: map-get($map, 'bg-color') - #111;
      }
      .el-submenu__title:hover {
        background-color: map-get($map, 'bg-color') - #151515;
      }
      .el-menu-item {
        color: map-get($map, 'color');
        &.is-active:focus {
          background-color: map-get($map, 'bg-color') - #222;;
        }
      }
      .el-menu-item:hover {
        background-color: map-get($map, 'bg-color') - #222;
      }
    }
  }
}
// 字体及按钮背景色
@mixin font_themes($color) {
  #body[data-fonttheme="#{$color}"] {
    color: #{$color};
    .el-tabs__header .el-tabs__item {
      color: inherit;
    }
    // card 内容区 按钮
    .el-table .el-button--text {
      color: #{$color};
      outline-color: #{$color};
    }
    .el-form .el-button {
      @include el_button($color)
    }
    .el-header .el-button--danger {
      @include el_button($color)
    }

    // 二级横向导航栏
    .el-card .el-tabs__nav-scroll {
      color: #{$color};
    }
    .el-tabs__active-bar {
      background-color: #{$color};
    }
    // 解决二级导航栏 半边边框问题
    .el-header {
      .el-tabs__header .el-tabs__nav-scroll {
        .is-active:hover{
          border-left-color: #e4e7ed;
          border-bottom-color: white;
        }
        .is-active {
          border-left-color: #e4e7ed;
          border-bottom-color: white;
        }
      }
    }
    // card 内容区 字体样式
    .el-card, & .el-table, & .el-dialog{
      .el-input__inner:focus, & .el-date-editor:focus, & .is-active:hover{
        border-color: #{$color};
      }
      .is-indeterminate .el-checkbox__inner {
        background-color: #{$color};
        border-color: #{$color};
      }
      .is-checked {
        .el-checkbox__inner, & .el-radio__inner {
          background-color: #{$color};
          border-color: #{$color};
        }
        .el-radio__label, & .el-checkbox__label {
          color: #{$color};
        }
      }
      .is-active {
        & > .el-radio-button__inner {
          background-color: #{$color};
          border-color: #{$color};
        }
      }
      .el-textarea__inner:focus {
        border-color: #{$color};
      }
      .el-pager {
        color: #{$color};
      }
      .el-switch.is-checked .el-switch__core {
        background-color: #{$color};
      }
    }

    .custom-label{
      color: #{$color};
    }

    // dialog 底部按钮
    .el-dialog__footer {
      .el-button {
        border-color: #{$color};
      }
      .el-button--primary {
        background-color: #{$color};
      }
    }
  }
}

@each $theme, $map in $navthemes {
    @include nav_themes($theme, $map)
}
@each $color in $fontthemes {
    @include font_themes($color)
}
